<template>
  <div class="login-bg">
    <div class="login-container">
      <div class="login-title">点餐系统</div>
      <el-form class="login-form">
        <el-form-item>
          <el-input
            v-model="username"
            placeholder="用户名"
            prefix-icon="el-icon-user"
            size="large"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="password"
            type="password"
            placeholder="密码"
            prefix-icon="el-icon-lock"
            size="large"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="login" size="large" block>登录</el-button>
        </el-form-item>
        <el-form-item style="margin-bottom: 0;">
          <el-button type="text" class="register-link" @click="showRegister = true">没有账号？注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog v-model="showRegister" title="用户注册" width="380px" :close-on-click-modal="false">
      <el-form :model="registerForm" label-width="80px" class="register-form">
        <el-form-item label="姓名">
          <el-input v-model="registerForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="registerForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="registerForm.sex" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="registerForm.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="registerForm.idNumber" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showRegister = false">取消</el-button>
        <el-button type="primary" @click="register">注册</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import router from '../router';
import { ElMessage } from 'element-plus'

const username = ref('');
const password = ref('');

const showRegister = ref(false);
const registerForm = ref({
  name: '',
  phone: '',
  sex: '',
  username: '',
  idNumber: '',
  password: '',
  confirmPassword: ''
});

const login = () => {
  if (!username.value) {
    ElMessage('账号不能为空');
    return;
  }
  axios({
    url: "/api/admin/employee/login",
    method: 'post',
    data: {
      username: username.value,
      password: password.value
    }
  }).then(res => {
    if(res.data.code==200){
      sessionStorage.setItem('token', res.data.data.token);
      ElMessage('登录成功');
      router.push('/homepage');
    }else{
      ElMessage({
        message: res.data.msg,
        type: 'error',
        plain: true,
      })
    }
  });
}

const register = () => {
  if (!registerForm.value.name || !registerForm.value.phone || !registerForm.value.sex || !registerForm.value.username || !registerForm.value.idNumber || !registerForm.value.password || !registerForm.value.confirmPassword) {
    ElMessage.error('请填写完整信息');
    return;
  }
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致');
    return;
  }
  axios.post('/api/admin/employee/register/login', {
    name: registerForm.value.name,
    phone: registerForm.value.phone,
    sex: registerForm.value.sex,
    username: registerForm.value.username,
    idNumber: registerForm.value.idNumber,
    password: registerForm.value.password
  }).then(res => {
    if(res.data.code === 200){
      ElMessage.success('注册成功，请登录');
      showRegister.value = false;
      // 清空注册表单
      registerForm.value = { name: '', phone: '', sex: '', username: '', idNumber: '', password: '', confirmPassword: '' };
    }else{
      ElMessage.error(res.data.msg || '注册失败');
    }
  })
}
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.login-container {
  width: 360px;
  padding: 40px 32px 32px 32px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-title {
  font-size: 2rem;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 32px;
  letter-spacing: 2px;
  text-align: center;
}

.login-form {
  width: 100%;
}

.login-btn {
  width: 100%;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.register-link {
  width: 100%;
  text-align: right;
  font-size: 14px;
  color: #409eff;
  cursor: pointer;
  padding: 0;
}

.register-form {
  margin-top: 10px;
}

@media (max-width: 480px) {
  .login-container {
    width: 95vw;
    padding: 24px 8px 16px 8px;
  }
  .login-title {
    font-size: 1.3rem;
    margin-bottom: 18px;
  }
}
</style>
